<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" xmlns="http://www.w3.org/1999/xhtml"
	xml:lang="en" lang="en"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Sistema GED - Sistema de Gerênciamento de Educação a
		Distância</title>
	<h:outputStylesheet library='stylesheets' media="screen"
		name="login.css" />
	<h:outputStylesheet library='stylesheets' media="screen"
		name="ui-theme.css" />
	<h:outputStylesheet library='javascripts' media="screen"
		name="fancybox/jquery.fancybox-1.3.4.css" />
	<link rel="shortcut icon" type="images/png"
		href="#{request.contextPath}/resources/images/favicon.png" />
	<h:outputScript library='javascripts' name="jquery-1.4.2.min.js" />
	<h:outputScript library='javascripts'
		name="fancybox/jquery.fancybox-1.3.4.js" />
	<script type="text/javascript" charset="utf-8">
		$(document).ready(
				function() {
					if ($("#senha")) {
						var $this = $("#senha");
						if ($this.value == '' || $this.value == 'Senha'
								|| !$this.value) {
							$("#senha").removeAttr("value");
							$("#senha").attr("value", "Senha");
						}
					}

					if ($("#usuario")) {
						var $this = $("#usuario");
						if ($this.value == ''
								|| $this.value == 'Digite seu Usuario'
								|| !$this.value) {
							$("#usuario").removeAttr("value");
							$("#usuario").attr("value", "Digite seu Usuario");
						}
					}

					$("form input[type='submit']").click(function() {
						$.fancybox.close();
					});
					$("#ainda-nao-cadastrado a").fancybox({
						'width' : '70%',
						'height' : '80%',
						'autoScale' : false,
						'transitionIn' : 'fade',
						'transitionOut' : 'none',
						'type' : 'iframe',
						'onCleanup' : function() {
							$(location).attr('href', "#");
						}
					});

					$(".esqueceu-senha a").fancybox({
						'height' : '45%',
						'autoScale' : false,
						'transitionIn' : 'fade',
						'transitionOut' : 'none',
						'type' : 'iframe',
						'onCleanup' : function() {
							$(location).attr('href', "#");
						}
					});
				});
	</script>

</h:head>

<body>
	<h:body>
		<div id="geral">
			<div id="box-form">
				<div id="topo">
					<div class="logomarca">
						<a href="#"><h:graphicImage library='images'
								name="logo.png" /></a>
					</div>
				</div>
				<div id="conteudo">

					<div class="ui-widget">
						<h:messages id="msg"
							style="font-size: 12px; margin-top: 20px; margin-bottom: 20px; padding: 10px 0.7em;"
							class="ui-state-error ui-corner-all" />
					</div>

					<h:form id="efetuarLogin" prependId="false">
						<div id="duas-colunas">
							<div class="esq"></div>
							<div class="dir"></div>
						</div>

						<div id="duas-colunas">
							<div class="esq">
								<p>

									<h:inputText type="text" name="usuario" id="usuario"
										value="#{usuario}" defaultText="Digite seu Usuario"
										onclick="if (this.value == 'Digite seu Usuario') { this.value = ''}"
										onblur="if (this.value == '') { this.value = 'Digite seu Usuario'} " />
								</p>
							</div>
							<div class="dir">
								<p>
									<h:inputSecret type="password" name="senha" id="senha"
										value="#{senha}" defaultText="Senha"
										onclick="if (this.value == 'Senha') { this.value = ''}"
										onblur="if (this.value == '') { this.value = 'Senha'} " />
								</p>
							</div>
						</div>

						<div id="duas-colunas">
							<div class="esq btn-acessar">
								<h:commandButton type="submit" name="acessar" value="Acessar"
									id="acessar" action="#{usuarioMB.doLogin(usuario,senha)}"
									update=":msg" />
							</div>
							<div class="dir esqueceu-senha">
								<h:link value="Esqueceu a Senha?"
									outcome="/publico/esqueciSenha" />

							</div>

						</div>
					</h:form>

					<div id="ainda-nao-cadastrado">
						Ainda não possui cadastro?<br />
						<h:link value="Clique aqui para
							se cadastrar."
							outcome="/publico/novoUsuario.xhtml" />
						É rápido e Simples!<br /> <br />
					</div>
				</div>
			</div>
		</div>

		<div id="bg-rodape">
			<div id="rodape">
				<div class="copyright">
					Projeto de Desenvolvimento de Sistema Corporativo<br /> Diretoria
					de Educação e Tecnologia da Informação – Instituto Federal de
					Educação, Ciência e Tecnologia do Rio Grande do Norte
				</div>
				<div class="assinatura">
					<a href="http://dietinf.ifrn.edu.br" target="_blank"><h:graphicImage
							library='images' name="assinatura.png" /></a>
				</div>
			</div>
		</div>
	</h:body>
</body>
</html>